<template>
	<div>
		<main-content
			v-if="!showDetail"
			:tableHeight.sync="tableHeight"
			:otherDependenComponents="otherDependenComponents"
		>
			<template slot="query">
				<el-form
					ref="form"
					:inline="true"
					:model="queryData"
					label-width="auto"
					class="flex-warp-container"
				>
					<el-form-item
						:label="`${$t('common.belong_merchant')}:`"
						prop="merchantId"
						class="flex-row-container"
						label-width="77px"
					>
						<merchant-select
							v-model="queryData.merchantId"
						></merchant-select>
					</el-form-item>
					<el-form-item
						:label="`${$t('funds.apply_time')}:`"
						class="flex-row-container"
						label-width="77px"
					>
						<el-date-picker
							v-model="queryData.time"
							size="medium"
							:picker-options="pickerShortcut2"
							format="yyyy-MM-dd HH:mm:ss"
							type="datetimerange"
							range-separator="-"
							:start-placeholder="$t('common.start_date')"
							:end-placeholder="$t('common.end_date')"
							align="right"
							:default-time="defaultTime"
						></el-date-picker>
					</el-form-item>
					<el-form-item
						:label="`${$t('funds.fund_audit.order_status')}:`"
						class="flex-row-container"
						label-width="77px"
					>
						<el-select
							v-model="queryData.orderStatus"
							style="width: 260px"
							:popper-append-to-body="false"
							:placeholder="$t('common.select_all')"
							clearable
						>
							<el-option
								v-for="item in orderTypeArr"
								:key="item.code"
								:label="item.description"
								:value="item.code"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item
						:label="`${$t('funds.order_no')}:`"
						class="flex-row-container"
						label-width="61px"
					>
						<el-input
							v-model="queryData.eventId"
							clearable
							size="medium"
							style="width: 330px"
							:placeholder="$t('common.please_enter')"
							v-input="{ name: 'num_alp' }"
						></el-input>
					</el-form-item>
					<el-form-item
						:label="`${$t('common.withdraw_money_wallet')}:`"
						class="flex-row-container"
						label-width="77px"
					>
						<el-select
							v-model="queryData.walletType"
							clearable
							:placeholder="$t('common.select_all')"
							:popper-append-to-body="false"
							style="width: 220px;"
						>
							<el-option
								:label="$t('common.cash_wallet')"
								value="17"
							></el-option>
							<el-option
								:label="$t('common.earnings_wallet')"
								value="21"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item
						:label="`${$t('funds.proxy_name')}:`"
						class="flex-row-container"
						label-width="77px"
					>
						<el-input
							v-model="queryData.userName"
							clearable
							size="medium"
							style="width: 200px"
							:placeholder="$t('common.please_enter')"
							v-input="{ name: 'num_alp' }"
						></el-input>
					</el-form-item>
					<!-- <el-form-item label="代理姓名:">
						<el-input
							v-model="queryData.realName"
							clearable
							size="medium"
							style="width: 260px"
							:placeholder="$t('common.please_enter')"
							@keyup.enter.native="enterSearch"
						></el-input>
					</el-form-item> -->

					<el-form-item style="margin-left: 8px">
						<el-button
							type="primary"
							icon="el-icon-search"
							:disabled="loading"
							:loading="loading"
							size="medium"
							@click="search"
						>
							{{ $t('common.search') }}
						</el-button>
						<el-button
							icon="el-icon-refresh-left"
							:disabled="loading"
							size="medium"
							@click="reset"
						>
							{{ $t('common.reset') }}
						</el-button>
					</el-form-item>
				</el-form>
			</template>
			<template slot="content">
				<el-table
					v-loading="loading"
					element-loading-spinner="el-icon-loading"
					border
					size="mini"
					class="small-size-table"
					:data="dataList"
					:max-height="tableHeight"
					highlight-current-row
					style="width: 100%"
					:header-cell-style="getRowClass"
				>
					<el-table-column
						prop="eventId"
						align="center"
						:label="$t('funds.order_no')"
						width="270"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<Copy
								v-if="!!scope.row.eventId"
								:title="scope.row.eventId"
								:copy="copy"
							>
								{{ scope.row.eventId }}
							</Copy>
							<span v-else>-</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="thirdOrderNo"
						align="center"
						min-width="230"
						:label="$t('funds.fund_audit.connect_three_order_no')"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<Copy
								v-if="!!scope.row.thirdOrderNo"
								:title="scope.row.thirdOrderNo"
								:copy="copy"
							>
								{{ scope.row.thirdOrderNo }}
							</Copy>
							<span v-else>-</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="createdAt"
						align="center"
						:label="$t('funds.apply_time')"
						width="180"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							{{ scope.row.eventTime || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						prop="userName"
						align="center"
						:label="$t('funds.proxy_name')"
						width="130"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<Copy
								v-if="!!scope.row.userName"
								:title="scope.row.userName"
								:copy="copy"
							>
								{{ scope.row.userName }}
							</Copy>
							<span v-else>-</span>
						</template>
					</el-table-column>
					<!-- <el-table-column
							prop="realName"
							align="center"
							:label="$t('funds.proxy_real_name')"
							width="120"
						>
							<template slot-scope="scope">
								{{ scope.row.realName || '-' }}
							</template>
						</el-table-column> -->
					<el-table-column
						prop="merchantName"
						align="center"
						:label="$t('common.belong_merchant')"
						width="150"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							{{ scope.row.merchantName || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						prop="walletType"
						align="center"
						:label="$t('common.withdraw_money_wallet')"
						min-width="90"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span v-if="scope.row.walletType === 17">
								{{ $t('common.cash_wallet') }}
							</span>
							<span v-else-if="scope.row.walletType === 21">
								{{ $t('common.earnings_wallet') }}
							</span>
							<span v-else>
								-
							</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="orderAmount"
						align="center"
						:label="$t('funds.fund_audit.order_withdraw_amount')"
						width="150"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span>
								{{
									handleNumber(
										scope.row.symbolUsdt,
										scope.row.orderAmountUsdt
									)
								}}
							</span>
							<br />
							<span v-if="scope.row.withdrawType === 1">
								({{
									handleNumber(
										scope.row.symbolCny,
										scope.row.orderAmountCny
									)
								}})
							</span>
						</template>
					</el-table-column>

					<el-table-column
						prop="isBig"
						align="center"
						:label="$t('funds.fund_audit.big_withdraw')"
						width="150"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span
								:style="{
									color:
										Number(scope.row.bigWithdraw) === 1
											? 'red'
											: ''
								}"
							>
								{{
									Number(scope.row.bigWithdraw) === 1
										? $t('common.yes')
										: $t('common.no')
								}}
							</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="payType"
						align="center"
						:label="$t('funds.pay_type')"
						min-width="130"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span v-if="Number(scope.row.withdrawType) === 1">
								{{
									$t(
										'funds.proxy_member_funds_record.brank_card'
									)
								}}
							</span>
							<span
								v-else-if="Number(scope.row.withdrawType) === 2"
							>
								{{
									$t(
										'funds.proxy_member_funds_record.virtual_currency'
									)
								}}
							</span>
							<span
								v-else-if="Number(scope.row.withdrawType) === 8"
							>
								{{ $t('common.bmh_name') }}
							</span>
							<span v-else-if="Number(scope.row.withdrawType) === 9">
								{{
									$t('common.yh_name')
								}}
							</span>
							<span v-else>-</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="orderStatus"
						align="center"
						:label="$t('funds.fund_audit.order_status')"
						:width="getWidth(130, 1.5)"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span
								v-if="
									!!scope.row.orderStatus ||
										scope.row.orderStatus === 0
								"
							>
								<el-tag
									:type="
										scope.row.orderStatus == 11
											? 'success'
											: 'danger'
									"
								>
									{{
										typeFilter(
											scope.row.orderStatus,
											'withdrawOrderStatus'
										)
									}}
								</el-tag>
							</span>
							<span v-else>-</span>
						</template>
					</el-table-column>
					<!-- <el-table-column
							prop="orderRateAmount"
							align="center"
							label="提款手续费"
							width="120"
						>
							<template slot-scope="scope">
								<span
									v-if="
										!!scope.row.orderRateAmount ||
											scope.row.orderRateAmount + '' === '0'
									"
								>
									{{ scope.row.orderRateAmount }}
								</span>
								<span v-else>-</span>
							</template>
						</el-table-column> -->

					<el-table-column
						prop="details"
						align="center"
						:label="$t('funds.fund_audit.audit_time')"
						width="220"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<div v-if="scope.row.audit1Time">
								<p>
									{{
										$t('funds.fund_audit.audit_text_1')
									}}：{{ scope.row.audit1Time || '-' }}
								</p>
								<p v-if="scope.row.audit2Time">
									{{
										$t('funds.fund_audit.audit_text_2')
									}}：{{ scope.row.audit2Time || '-' }}
								</p>
								<p v-if="scope.row.audit3Time">
									{{
										$t('funds.fund_audit.audit_text_3')
									}}：{{ scope.row.audit3Time || '-' }}
								</p>
								<p v-if="scope.row.confirmTime">
									{{
										scope.row.orderStatus === 12
											? $t('funds.fund_audit.cancel_pay')
											: $t(
													'funds.fund_audit.confirm_pay'
											  )
									}}：{{ scope.row.confirmTime || '-' }}
								</p>
							</div>
							<span v-else>-</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="details"
						align="center"
						:label="$t('funds.fund_audit.audit_cost')"
						width="150"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<div
								v-if="
									scope.row.audit1Cost ||
										scope.row.audit1Cost === 0
								"
							>
								<p>
									{{
										$t('funds.fund_audit.audit_text_1')
									}}：{{
										timeTurner(scope.row.audit1Cost) || '-'
									}}
								</p>
								<p
									v-if="
										scope.row.audit2Cost ||
											scope.row.audit2Cost === 0
									"
								>
									{{
										$t('funds.fund_audit.audit_text_2')
									}}：{{
										timeTurner(scope.row.audit2Cost) || '-'
									}}
								</p>
								<p
									v-if="
										scope.row.audit3Cost ||
											scope.row.audit3Cost === 0
									"
								>
									{{
										$t('funds.fund_audit.audit_text_3')
									}}：{{
										timeTurner(scope.row.audit3Cost) || '-'
									}}
								</p>
								<p
									v-if="
										scope.row.confirmCost ||
											scope.row.confirmCost === 0
									"
								>
									{{
										scope.row.orderStatus === 12
											? $t('funds.fund_audit.cancel_pay')
											: $t(
													'funds.fund_audit.confirm_pay'
											  )
									}}：{{
										timeTurner(scope.row.confirmCost) || '-'
									}}
								</p>
							</div>
							<span v-else>-</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="details"
						align="center"
						:label="$t('funds.fund_audit.lock_account')"
						width="180"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<div v-if="scope.row.audit1Operator">
								<p>
									{{
										$t('funds.fund_audit.audit_text_1')
									}}：{{ scope.row.audit1Operator || '-' }}
								</p>
								<p v-if="scope.row.audit2Operator">
									{{
										$t('funds.fund_audit.audit_text_2')
									}}：{{ scope.row.audit2Operator || '-' }}
								</p>
								<p v-if="scope.row.audit3Operator">
									{{
										$t('funds.fund_audit.audit_text_3')
									}}：{{ scope.row.audit3Operator || '-' }}
								</p>
								<p v-if="scope.row.confirmOperator">
									{{
										scope.row.orderStatus === 12
											? $t('funds.fund_audit.cancel_pay')
											: $t(
													'funds.fund_audit.confirm_pay'
											  )
									}}：{{ scope.row.confirmOperator || '-' }}
								</p>
							</div>
							<span v-else>-</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="auditStep"
						align="center"
						:label="$t('common.actions')"
						min-width="150"
					>
						<template slot-scope="scope">
							<el-button
								v-if="hasPermission('408041')"
								type="primary"
								size="medium"
								@click="goDetail(scope.row)"
							>
								{{ $t('common.check') }}
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页 -->
				<el-pagination
					:current-page.sync="pageNum"
					class="pageValue"
					background
					layout="total, sizes,prev, pager, next, jumper"
					:page-size="pageSize"
					:page-sizes="pageSizes"
					:total="total"
					:pager-count="9"
					@current-change="handleCurrentChange"
					@size-change="handleSizeChange"
				></el-pagination>
			</template>
		</main-content>
		<detail
			v-else
			:type="type"
			:rowData="rowData"
			@goBack="goBack"
		></detail>
	</div>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { getUsername } from '@/utils/auth'
import { routerNames } from '@/utils/consts'
import MainContent from '@/components/MainContent/index.vue'

const end = () => {
	return dayjs()
		.endOf('day')
		.valueOf()
}
const start = () => {
	return dayjs()
		.startOf('day')
		.valueOf()
}

export default {
	name: routerNames.agentWithdrawalReviewRecord,
	components: {
		detail: () => import('./components/detail'),
		MainContent
	},
	mixins: [list],
	data() {
		this.loadData = this.throttle(this.loadData, 1000)
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			queryData: {
				time: [start(), end()]
			},
			type: true,
			showDetail: false,
			rowData: {},
			name: '',
			dataList: []
		}
	},
	computed: {
		orderTypeArr() {
			const list = this.globalDics.withdrawOrderStatus.filter((item) =>
				['8', '9', '10', '11', '12', '13'].includes(item.code)
			)
			return list || []
		}
	},
	mounted() {
		this.name = getUsername()
	},
	methods: {
		cleanBlankSpace(key, key1) {
			if (this[key][key1]) {
				this[key][key1] = (this[key][key1] + '').replace(/\s+/g, '')
			}
		},
		timeTurner(time) {
			var day = Math.floor(time / 86400) // 整数部分代表的是天；一天有24*60*60=86400秒 ；

			time = time % 86400 // 余数代表剩下的秒数；

			var hour = Math.floor(time / 3600) // 整数部分代表小时；

			time %= 3600 // 余数代表 剩下的秒数；

			var minute = Math.floor(time / 60)

			time %= 60

			var str = `${day > 0 ? day + 'd' : ''}${
				hour > 0 || day ? hour + 'h' : ''
			}${minute > 0 || hour ? minute + 'm' : ''}${time}s`
			return str
		},
		loadData() {
			this.loading = true
			const [createdAtStart, createdAtEnd] = this.queryData.time || []
			let params = {
				...this.queryData,
				eventTimeStart: createdAtStart
					? dayjs(createdAtStart).format('YYYY-MM-DD HH:mm:ss')
					: undefined,
				eventTimeEnd: createdAtEnd
					? dayjs(createdAtEnd).format('YYYY-MM-DD HH:mm:ss')
					: undefined
			}
			params = {
				...this.getParams(params)
			}
			delete params.time
			this.$api
				.agentWithdrawRecordAPI(params)
				.then((res) => {
					this.loading = false
					if (res?.code === 200) {
						const { record, totalRecord } = res.data || {}
						this.dataList = Array.isArray(record)
							? Object.freeze(record)
							: []
						this.total = totalRecord || 0
					} else {
						this.$message({
							message: res?.msg,
							type: 'error'
						})
					}
				})
				.catch(() => {
					this.loading = false
				})
		},
		goDetail(row) {
			this.type =
				Number(row.auditStep) === 1 && row.auditName === this.name
			this.rowData = row
			this.showDetail = true
		},
		goBack() {
			this.showDetail = false
			this.loadData()
		},
		reset() {
			this.queryData = {
				time: [start(), end()],
				thirdOrderNo: undefined,
				userName: undefined,
				realName: undefined,
				orderStatus: ''
			}
			this.loadData()
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
::v-deep .caret-wrapper {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.data-refresh {
	margin-top: 0;
	padding-bottom: 20px;
}
.look {
	//background-color: #00BFBF;
	//border-color: #00BFBF;
	color: #00bfbf;
}
</style>
